import { getCookie } from "@/utils/hsj";

function addCss(cssList, el) {
  let css = "";
  const options = el.__options__;
  const commonOptions = el.__commonOptions__;
  const style = options.style;
  const labelWidth = el.__config__.showLabel && el.__config__.labelWidth;
  const isForm = el.__isForm__;
  if (options.className) {
    // if (style.length > 0) {
    const cssValue = [];
    const viewType = getCookie("viewType");
    const arr = ["width", "height", "left", "top", 'z-index'];
    if (viewType === "drag") {
      style.forEach((item) => {
        if (!arr.includes(item.label)) {
          cssValue.push(`${item.label}: ${item.value};`);
        }
      });
      let str = {}
      Object.entries(commonOptions).map((item) => {
        if (item[0] === "width" || item[0] === "left") {
          let size = null
          const sizePoint = (item[1] / 1440 * 100).toFixed(2) + '%'
          if (item[0] === "width") {
            size = labelWidth ? `calc(${sizePoint} -${labelWidth}rem)` : sizePoint
            str.width = size
          } else {
            size = sizePoint
            str.left = size
          }

          // cssValue.push(`${item[0]}: ${size};`);
        } else if (item[0] === "height") {
          str.height = `${(item[1] / 8).toFixed(2) + "%"}`
          // str.height = `${isForm ? "" : (item[1] * 0.75).toFixed(2)}rem`
        } else {
          str.top = `${(item[1] / 8).toFixed(2) + "%"}`
          // cssValue.push(`${item[0]}: ${item[1]}rem;`);
        }
      });
      str.zIndex = el['z-index']
      const { width, height, top, left, zIndex } = str
      // cssValue.push(`z-index: ${el['z-index']};`);
      cssValue.push(`.fn(${width},${height === 'rem' ? 'auto' : height},${left},${top},${zIndex})`);
    } else {
      style.forEach((item) => {
        cssValue.push(`${item.label}: ${item.value};`);
      });
    }
    css = `.${options.className} {${cssValue.join("")}}`;
    // }
  }
  // css += '.inline-block{display:inline-block;} .label-item{display: flex;align-items: center;}'
  css && cssList.indexOf(css) === -1 && cssList.push(css);
  if (el.__config__.children) {
    el.__config__.children.forEach((el2) => addCss(cssList, el2));
  }
}

export function makeUpCss(conf) {
  const cssList = [];
  conf.fields.forEach((el) => addCss(cssList, el));
  return cssList.join("\n");
}
